<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>管理控制台</title>
    <link rel="stylesheet" href="../dist/layui.css" />
    <link rel="stylesheet" href="assets/css/style.css" />
    <link rel="stylesheet" href="assets/css/style-dashboard.css" />
</head>
<body class="fixed-header">
<div class="app-container">
    <div class="app-header"></div>
    <div class="app-nav app-left-slider">
        <div class="nav-header">
            <span class="logo">
                <img src="assets/images/logo-while.png" />
            </span>
        </div>
        <div class="nav-wrapper">
            <ul id="sidebar-menu" class="sidebar-menu">
                <li class="sidebar-header">主菜单</li>
                <li>
                    <a href="#">
                        <span class="icons icon-airplay"></span>
                        <span class="title">控制台</span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <span class="icons icon-file"></span>
                        <span class="title">表单页</span>
                        <i class="icon-chevron-right float-right"></i>
                        <span class="label label-primary float-right">4</span>
                    </a>
                    <ul class="sidebar-submenu" style="display: none;">
                        <li><a href="#"><span class="icons icon-circle"></span> <span class="title">基础表单</span></a></li>
                        <li><a href="#"><span class="icons icon-circle"></span> <span class="title">分步表单</span></a></li>
                        <li><a href="#"><span class="icons icon-circle"></span> <span class="title">高级表单</span></a></li>
                        <li><a href="#"><span class="icons icon-circle"></span> <span class="title">提交表单</span></a></li>
                    </ul>
                </li>
                <li>
                    <a href="#">
                        <span class="icons icon-share"></span>
                        <span class="title">主菜单</span>
                        <i class="icon-chevron-right float-right"></i>
                    </a>
                    <ul class="sidebar-submenu">
                        <li><a href="#"><span class="icons icon-circle"></span> <span class="title">一级菜单</span></a></li>
                        <li>
                            <a href="#"><span class="icons icon-circle"></span> <span class="title">二级菜单</span> <i class="icon-chevron-right float-right"></i></a>
                            <ul class="sidebar-submenu">
                                <li><a href="#"><span class="icons icon-circle"></span> <span class="title">三级菜单</span></a></li>
                                <li>
                                    <a href="#"><span class="icons icon-circle"></span> <span class="title">四级菜单</span> <i class="icon-chevron-right float-right"></i></a>
                                    <ul class="sidebar-submenu">
                                        <li><a href="#"><span class="icons icon-circle"></span> <span class="title">五级菜单</span></a></li>
                                        <li><a href="#"><span class="icons icon-circle"></span> <span class="title">五级菜单</span></a></li>
                                    </ul>
                                </li>
                            </ul>
                        </li>
                        <li><a href="#"><span class="icons icon-circle"></span> <span class="title">一级菜单</span></a></li>
                    </ul>
                </li>
                <li class="sidebar-header">其它</li>
                <li><a href="#"><span class="icons icon-circle"></span> <span class="title">说明文档</span></a></li>
                <li><a href="#"><span class="icons icon-circle"></span> <span class="title">开发文档</span></a></li>
            </ul>
        </div>
    </div>
    <div class="app-wrapper">
        <div class="page-header-wrapper hidden">
            <div class="page-header">
                <div class="page-title">控制台</div>
                <div class="page-breadcrumb">
                    <ul>
                        <li><a href="javascript:;">首页</a></li>
                        <li class="active"><a href="javascript:;">控制台</a></li>
                    </ul>
                </div>
            </div>
            <div class="page-header-content">
                表单页用于向用户收集或验证信息，基础表单常见于数据项较少的表单场景。
            </div>
        </div>
        <div class="page-wrapper">
            <div class="row space-sm">
                <div class="col-md-3">
                    <div class="panel">
                        <div class="panel-heading position-relative">
                            <span class="font-inline">总收入</span>
                            <span class="icon-briefcase icons-pb-right icons-color-danger"></span>
                        </div>
                        <div class="panel-body">
                            <h1>¥ 126,560</h1>
                        </div>
                        <div class="panel-footer">
                            日销售额￥12,423
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="panel">
                        <div class="panel-heading position-relative">
                            <span class="font-inline">订单数</span>
                            <span class="icon-flag icons-pb-right icons-color-warning"></span>
                        </div>
                        <div class="panel-body">
                            <h1>6,560</h1>
                        </div>
                        <div class="panel-footer">
                            转化率60%
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="panel">
                        <div class="panel-heading position-relative">
                            <span class="font-inline">总用户</span>
                            <span class="icon-users icons-pb-right icons-color-success"></span>
                        </div>
                        <div class="panel-body">
                            <h1>458,846</h1>
                        </div>
                        <div class="panel-footer">
                            日同比 12%
                            <span class="icon-chevron-up icons-color-success"></span>
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="panel">
                        <div class="panel-heading position-relative">
                            <span class="font-inline">访问量</span>
                            <span class="icon-trending-up icons-pb-right icons-color-primary"></span>
                        </div>
                        <div class="panel-body">
                            <h1>8,846</h1>
                        </div>
                        <div class="panel-footer">
                            日访问量1,234
                        </div>
                    </div>
                </div>
            </div>
            <div class="row space-sm">
                <div class="col-md-6">
                    <div class="panel">
                        <div class="panel-heading">
                            <h3 class="panel-title">周销售额</h3>
                        </div>
                        <div class="panel-body">
                            <div id="total_sales" style="height: 300px;"></div>
                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="panel">
                        <div class="panel-heading">
                            <h3 class="panel-title">周访问量</h3>
                        </div>
                        <div class="panel-body">
                            <div id="total_views" style="height: 300px;"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row space-sm">
                <div class="col-md-12">
                    <div class="panel">
                        <div class="panel-heading">
                            <h3 class="panel-title">会员分布图</h3>
                        </div>
                        <div class="panel-body">
                            <div id="total_users" style="height: 600px;"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="app-footer">
        <div class="app-footer-wrapper">
            <span class="version float-right">v1.0.0</span>
        </div>
    </div>
</div>
<script type="text/javascript" src="../dist/layui.js"></script>
<script type="text/javascript">
    layui.config({base: './assets/js/'}).use(['app', 'dashboard']);
</script>
</body>
</html>